import React from 'react'
import {  NavLink, useRoutes } from 'react-router-dom'
// 路由表
import routes from './routes'
import Header from './component/Header'
// import MyNavLink from './components/MyNavLink'
// import { Redirect } from 'react-router-dom/cjs/react-router-dom.min'

// 创建组件
function App() {
  // useRoutes本身可以利用路由表生成<Routes>...<Routes/>结构
  const element=useRoutes(routes)
  return (
    <div>
      <div>
        <Header></Header>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 路由链接 */}
              <NavLink className="list-group-item" to='/about'>About</NavLink>
              <NavLink className="list-group-item" to='/home'>Home</NavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由 */}
                {element}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
// 默认暴露
export default App